<template>
  <view>
    <view class="goods-list">
      <block v-for="(product, index) in productList" :key="index">
        <view class="goods-item" @click="jumpDetail(product)">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image
              :src="product.goods_small_logo || defaultImage"
              class="goods-pic"
            ></image>
          </view>

          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{ product.goods_name }}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price"
                >￥{{ formatPrice(product.goods_price) }}</view
              >
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
// $route.query.cid  query
// 小程序原生获取页面参数 就是 基于 onLoad 的第一个参数
export default {
  data() {
    return {
      loading: false, // 记录当前是否正在请求列表数据
      params: {
        // 1. 查询关键词
        query: '',

        // 2. 分类Id
        cid: '',

        // 3. 页码
        pagenum: 1,

        // 4. 每页条数
        pagesize: 20,
      },
      productList: [],
      total: 0,
      defaultImage:
        'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
    }
  },
  onLoad(options) {
    console.log(options)
    this.params.cid = options.cid || ''
    this.params.query = options.query || ''

    this.getProductList()
  },
  onReachBottom() {
    console.log('触底了')

    if (this.total === this.productList.length) {
      // 总数达到了
      return this.$msg('我也是有底线的!!不要再翻了')
    }

    if (this.loading) {
      // 请求过程中 不做任何其他请求的!!!
      return
    }
    // 一旦达到触底条件(自己设置的 200) 就会执行
    // console.log(111)
    this.params.pagenum++
    this.getProductList()
  },
  async onPullDownRefresh() {
    // console.log(111)
    // setTimeout(() => {
    //   // 数据回来以后 一定要主动关闭下拉动作
    //   uni.stopPullDownRefresh()
    // }, 2000)

    this.params.pagenum = 1 // 重置页码
    this.productList = [] // 重置列表数据
    await this.getProductList() // 获取第一页的20条数据渲染页面
    uni.stopPullDownRefresh()
  },
  methods: {
    // 获取商品列表数据的方法
    async getProductList() {
      this.loading = true
      const { meta, message } = await this.$http.get(
        '/goods/search',
        this.params
      )

      // 请求失败处理
      if (meta.status !== 200) {
        return this.$msg()
      }

      // this.productList = message.goods
      // 移动端 或者 小程序 上啦加载数据  是累加的!!
      this.productList = [...this.productList, ...message.goods]
      this.total = message.total

      this.loading = false
    },

    formatPrice(price) {
      return Number(price).toFixed(2)
    },

    jumpDetail(product) {
      // console.log(product)
      uni.navigateTo({
        url:
          '/pages_sub1/product-detail/product-detail?pid=' + product.goods_id,
      })
    },
  },
  onShow() {},
  onHide() {},
  created() {},
}
</script>

<style scoped lang="scss">
.goods-item {
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .goods-item-left {
    margin-right: 10rpx;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
    }

    .goods-price {
      font-size: 32rpx;
      color: #c00000;
    }
  }
}
</style>
